/**
 * 1.基本数据类型
 * 1.1 number string 正常显示
 * 2.2 boolean,undefined,null 不显示
 *
 * 2. 引用数据类型 array,object,function
 * 2.1 数组
 *  数组中的每项元素，会当做一个个dom节点渲染出来
 * 2.2 对象
 * 对象不能直接放在差值表达式中，会报错
 * 2.3 函数
 * 函数本身也是对象，不能直接放在插值表达式中，通常要调用函数
 *
 * 3.其他
 * 三元运算符，逻辑运算符，JSX:通常和其他数据类型配合使用
 */

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

const isShow = true;
const isLoding = false;
const loadData = () => {
  if (isLoding) {
    return <div>加载中...</div>;
  } else {
    return <div>加载完成...</div>;
  }
};

const divNode = (
  <>
    {/* 三元运算符 */}
    <div>{isShow ? '显示' : '不显示'}</div>

    {/* 逻辑 */}
    <div>{isShow && '显示'}</div>
    {/* 条件渲染 if/else */}
    {loadData()}
  </>
);

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(divNode);
